
<template>
  <div style="background-color: #fcfcfc; font-family: '宋体'; height: 100%">
    <div>
      <my-bread
        level1="个人中心"
        level2="修改密码"
        :level3="levelName"
      ></my-bread>
    </div>
    <div style="margin-top: 25px; margin-left: 80px">
      <el-row :gutter="10" class="grid-content bg-purple-light">
        <el-col :span="2">
          <div
            style="
              background-color: #ffebcd;
              width: 60px;
              height: 60px;
              display: inline-block;
              border-radius: 50%;
              overflow: hidden;
            "
          >
            <el-image :src="src" style="width: 60px; height: 60px"></el-image>
          </div>
          <div style="margin-top: 5px; margin-left: 6px">
            <span>{{name}}</span>
          </div>
          <div style="margin-top: 50px; margin-left: 1px">
            <el-button
              type="text"
              style="font-size: 15px; color: #4d4d4d"
              @click="infomationClick()"
              ><b>个人信息</b
              ><span
                style="color: #b0e0e6"
                v-show="infomationShow"
                class="el-icon-s-promotion"
              ></span
            ></el-button>
          </div>
          <div style="margin-top: 5px; margin-left: 1px">
            <el-button
              type="text"
              style="font-size: 15px; color: #4d4d4d"
              @click="orderinfoClick()"
              ><b>订单详情</b
              ><span
                style="color: #b0e0e6"
                v-show="orderinfoShow"
                class="el-icon-s-promotion"
              ></span
            ></el-button>
          </div>
          <div style="margin-top: 5px; margin-left: 1px">
            <el-button
              type="text"
              style="font-size: 15px; color: #4d4d4d"
              @click="flowingwaterClick()"
              ><b>流水记录</b
              ><span
                style="color: #b0e0e6"
                v-show="flowingwaterShow"
                class="el-icon-s-promotion"
              ></span
            ></el-button>
          </div>
          <div style="margin-top: 5px; margin-left: 1px">
            <el-button
              type="text"
              style="font-size: 15px; color: #4d4d4d"
              @click="passwordClick()"
              ><b>修改密码</b
              ><span
                style="color: #b0e0e6"
                v-show="passwordShow"
                class="el-icon-s-promotion"
              ></span
            ></el-button>
          </div>
        </el-col>

        <el-col :span="21">
          <!-- 个人信息 -->
          <el-row v-show="infomationShow">
            <el-card style="margin-top: 30px">
              <el-row>
                <el-descriptions
                  class="margin-top"
                  title="个人信息"
                  :column="3"
                  :size="size"
                  border
                >
                  <template slot="extra">
                    <el-button type="primary" size="small">操作</el-button>
                  </template>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-user"></i>
                      用户名
                    </template>
                    {{username}}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-mobile-phone"></i>
                      手机号
                    </template>
                    {{telephone}}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-location-outline"></i>
                      身份证
                    </template>
                    {{idcard}}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-tickets"></i>
                      备注
                    </template>
                    <!-- <el-tag size="small">学校</el-tag> -->
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-office-building"></i>
                      余额
                    </template>
                    {{money}}
                  </el-descriptions-item>
                </el-descriptions>
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
              </el-row>
            </el-card>
          </el-row>
          <!-- 订单详情 -->
          <el-row v-show="orderinfoShow">
            <el-card style="margin-top: 30px">
              <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
              >
                <el-table-column prop="orderId" label="订单号" width="200">
                </el-table-column>
                <el-table-column prop="productName" label="产品">
                </el-table-column>
                <el-table-column prop="totalPrice" label="价格" width="180">
                </el-table-column>

                <el-table-column prop="orderStatus" label="状态">
                  <template slot-scope="scope">
                    <el-tag
                      v-if="scope.row.orderStatus == 1"
                      closable
                      type="success"
                    >
                      已支付
                    </el-tag>
                    <el-tag
                      v-if="scope.row.orderStatus == 0"
                      closable
                      type="info"
                    >
                      待支付
                    </el-tag>

                    <el-tag
                      v-if="scope.row.orderStatus == 2"
                      closable
                      type="warning"
                    >
                      订单过期
                    </el-tag>

                    <el-tag
                      v-if="scope.row.orderStatus == 3"
                      closable
                      type="danger"
                    >
                      异常
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      v-if="
                        scope.row.orderStatus == 1 || scope.row.orderStatus == 2
                      "
                      size="mini"
                      type="danger"
                      @click="del(scope.$index, scope.row)"
                      >删除</el-button
                    >
                    <el-button
                      v-if="scope.row.orderStatus == 0"
                      size="mini"
                      type="success"
                      @click="pay(scope.$index, scope.row)"
                      >支付</el-button
                    >
                    <el-button
                      size="mini"
                      type="primary"
                      @click="open(scope.$index, scope.row)"
                      >详情</el-button
                    >
                  </template>
                </el-table-column>

                <el-table-column label="来源"> </el-table-column>
              </el-table>
              <el-pagination
                v-if="total != 0"
                :page-size="8"
                :pager-count="6"
                @current-change="page"
                layout="prev, pager, next"
                :total="total"
              >
              </el-pagination>
            </el-card>
          </el-row>
          <!-- 修改密码 -->
          <el-row v-show="passwordShow">
            <el-card style="margin-top: 30px">
              <el-form :model="personalForm">
                <el-row :gutter="12" style="margin-top: 1px">
                  <el-col :span="6">
                    <div style="text-align: right"><span>密码：</span></div>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item prop="password">
                      <el-input
                        type="password"
                        show-password
                        v-model="personalForm.password"
                        placeholder="请输入原来的密码"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="12" style="margin-top: 1px">
                  <el-col :span="6">
                    <div style="text-align: right"><span>密码：</span></div>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item prop="password1">
                      <el-input
                        type="password"
                        show-password
                        v-model="personalForm.password1"
                        placeholder="请输入新的密码"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="12" style="margin-top: 1px">
                  <el-col :span="6">
                    <div style="text-align: right"><span>确认密码：</span></div>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item prop="password2">
                      <el-input
                        type="password"
                        show-password
                        v-model="personalForm.password2"
                        placeholder="请再次输入新的密码"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="12" style="margin-top: 1px">
                  <el-col :span="6">
                    <div style="text-align: right"><span>验证码：</span></div>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item prop="verification">
                      <el-input
                        type="text"
                        v-model="personalForm.verification"
                        placeholder="验证码"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="2">
                    <img @click="openCode" :src="codePath" alt="验证码" class="dis c-v-pic" />
                    <!-- <el-button
                      type="primary"
                      plain
                      round
                      size="medium"
                      @click="sendMsg()"
                      :disabled="isDisabled"
                      >{{ buttonName }}</el-button
                    > -->
                  </el-col>
                </el-row>
                <el-row :gutter="12" style="margin-top: 10px">
                  <el-col :span="17" style="text-align: center">
                    <el-button
                      type="primary"
                      plain
                      round
                      size="medium"
                      @click="alterOpen"
                      >修改</el-button
                    >
                  </el-col>
                </el-row>
              </el-form>
            </el-card>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <div></div>
    <br />
    <br />
  </div>
</template>
<script>
import userAPI from "@/api/user";
import utilApi from "@/api/util.js";
export default {
  data() {
    return {
      total: 0,
      src: "https://mall-ts.oss-cn-shanghai.aliyuncs.com/mrtx.jfif",
      levelName: "",
      isCollapse: false,
      infomationShow: true,
      passwordShow: false,
      orderinfoShow: false,
      flowingwaterShow: false,
      buttonName: "发送短信",
      isDisabled: false,
      time: 60,
      personalForm: {
        account: "",
        phone_num: "",
        verification: "",
        password: "",
        password1: "",
        password2: "",
      },
      username:"",
      telephone:"",
      money:"",
      idcard:"",
      name:"",
      index:1,
      tableData: [{}],
      codePath: "",
    };
  },
  methods: {
    logout() {
      cookie.set("userInfo", "", { domain: "localhost" });
      cookie.set("token", "", { domain: "localhost" });
    },
    getUserInfo(){
      userAPI.getUserInfo().then((response) => {
        console.log(response);
        if(response.data.code==200){
          this.username=response.data.data.data.name;
          this.telephone=response.data.data.data.telphone;
          this.money=response.data.data.data.money;
          this.idcard=response.data.data.data.idcard;
          this.name=response.data.data.data.name
        }else{
          this.$message({
            type: 'warning',
            message: response.msg
          });     
        }
      });
    },
    openCode() {
      utilApi.getCode().then((response) => {
        this.codePath = window.URL.createObjectURL(response.data);
      });
    },
    alterOpen() {
        this.$confirm('是否确定修改密码?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.submit();
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          });          
        });
      },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
      console.log(key);
      console.log(keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },

    infomationClick() {
      //个人信息事件
      this.infomationShow = true;
      this.passwordShow = false;
      this.orderinfoShow = false;
      this.flowingwaterShow = false;
      this.getUserInfo();
    },

    passwordClick() {
      //密码事件
      this.infomationShow = false;
      this.passwordShow = true;
      this.orderinfoShow = false;
      this.flowingwaterShow = false;
      this.openCode();
    },

    orderinfoClick() {
      //订单事件
      this.infomationShow = false;
      this.passwordShow = false;
      this.orderinfoShow = true;
      this.flowingwaterShow = false;
    },
    flowingwaterClick() {
      //流水事件
      this.infomationShow = false;
      this.passwordShow = false;
      this.orderinfoShow = false;
      this.flowingwaterShow = true;
    },
    submit() {
      //提交
      
        if (this.personalForm.password === "") {
        this.$message.warning("初始密码不能为空");
      } else if (this.personalForm.password1 === "") {
        this.$message.warning("密码不能为空");
      } else if (this.personalForm.password2 === "") {
        this.$message.warning("密码不能为空");
      } else if (this.personalForm.verification === "") {
        this.$message.warning("验证码不能为空");
      } else {
        if (this.personalForm.password1 === this.personalForm.password2) {
              var password=this.personalForm.password;
              var password1=this.personalForm.password1;
              var password2=this.personalForm.password2;
              var verification=this.personalForm.verification;
            userAPI.alterPassword(password,verification,password1,password2).then((response)=>{
              console.log(response);
              if(response.data.code==200){
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              }else{
                 this.$message.warning(response.msg);
              }
            });
          
        } else {
          this.$message.warning("两次输入的密码不一致,请重新输入");
        }
      }
    },
    open(index, row) {
      this.$router.push({path: '/seckillProduct/'+row.seckillId})
    },
    del(index, row) {
      this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          userAPI.del(row.orderId, row.seckillId).then((response) => {
            console.log(response);
            if (response.data.code == 200) {
              this.getUserOrderInfo(this.index);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message({
                type: "info",
                message: "删除失败",
              });
            }
          });

        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    pay(index, row) {
      this.$router.push({path: '/order?'+"orderId="+row.orderId+"&"+"productId="+row.seckillId})
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.orderStatus == 2) {
        return "warning-row";
      } else if (row.orderStatus == 1) {
        return "success-row";
      } else if (row.orderStatus == 3) {
        return "error-row";
      }
      return "";
    },
    page(index) {
      this.index=index;
      this.getUserOrderInfo(index);
    },
    getUserOrderInfo(index) {
      userAPI.getAllOrder(index).then((response) => {
        console.log(response);
        if (response.data.code == 200) {
          this.tableData = response.data.data.data;
          this.total = response.data.data.total;
        }
      });
    },
  },
  created() {
    this.getUserOrderInfo(1);
    this.getUserInfo();
  },
};
</script>

<style>
.name {
  text-align: right;
}
.value {
  text-align: left;
}
.el-col {
  border-radius: 4px;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-table .error-row {
  background: #e72525;
}
</style>
